<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<comment-list :comments="comments"></comment-list>
		</div>
		<template id="tpl_comment">
			<div class="comment-list">
				<div v-for="comment in comments" :key="comment.id" class="comment-item">
					<h3>{{ comment.title }}</h3>
					<p>点赞数：{{ comment.likes }}<span v-if="comment.liked">👍</span></p>
					<button @click="toggle(comment)">点赞</button>	
				</div>
			</div>
		</template>
		<script>
			let app = Vue.createApp({
				data() {
					return{
						comments:[
							{ id: 1, title: '这是一条评论', likes: 10, liked: false },
							{ id: 2, title: '这是一条第二条评论', likes: 5, liked: false },
							{ id: 3, title: '这是一条第三条评论', likes: 0, liked: false }
						]
					}
				}
			})
			
			app.component('CommentList',{
				template:"#tpl_comment",
				props:{
					comments:{
						type:Array,
						required:true
					}
				},
				methods:{
					toggle(comment){
						if(comment.liked){
							comment.likes--
						}else{
							comment.likes++
						}
						comment.liked = !comment.liked
					}
				}
			})
			app.mount('#app')
		</script>
	</body>
</html>